<template>
  <div class="box">
    <div class="selectmonth">
      <picker mode="date" fields="month" @change="changemonth">
        <view class="uni-input"
          >月榜单<img class="img" src="../../../static/路径.png" alt=""
        /></view>
      </picker>
    </div>
    <div class="month">
      <div class="content">{{ startDate + "-" + endDate }}</div>
    </div>
    <div class="tabbox">
      <div
        :class="{ tabitem: true, tabactive: tabflag === 2 }"
        @click="changetab(2)"
      >
        总业绩额增涨
      </div>
      <div
        :class="{ tabitem: true, tabactive: tabflag === 3 }"
        @click="changetab(3)"
      >
        新人榜
      </div>
      <div
        :class="{ tabitem: true, tabactive: tabflag === 0 }"
        @click="changetab(0)"
      >
        业绩排名
      </div>
      <div
        :class="{ tabitem: true, tabactive: tabflag === 1 }"
        @click="changetab(1)"
      >
        新增保费
      </div>
    </div>
    <div class="ranklistbox" :class="{ 'set-height': issm }">
      <div class="tabtop">
        <div class="index"></div>
        <div class="name">姓名</div>
        <div class="dept">所属分组</div>
        <div class="price">
          {{ tabflag === 0 || tabflag === 3 ? "总业绩" : "业绩" }}
        </div>
      </div>
      <div class="emptyimgbox" v-if="list.length === 0">
        <img class="img" src="../../static/empty.png" alt="" />
      </div>
      <div
        :class="{
          listitem: true,
          one: index === 0,
          two: index === 1,
          three: index === 2,
        }"
        v-for="(ele, index) in list"
        :key="index"
      >
        <div class="index">
          {{ index + 1 >= 10 ? index + 1 : "0" + (index + 1) }}.
        </div>
        <div class="name">
          <img
            v-if="index === 0"
            class="oth"
            src="../../../static/one.png"
            alt=""
          />
          <img
            v-if="index === 1"
            class="oth"
            src="../../../static/two.png"
            alt=""
          />
          <img
            v-if="index === 2"
            class="oth"
            src="../../../static/three.png"
            alt=""
          />
          <img class="tx" :src="ele.salesHeadURL" alt="" /><span>{{
            ele.saleName
          }}</span>
        </div>
        <div class="dept">{{ ele.deptName }}</div>
        <div class="price">￥{{ ele.totalPerformance }}</div>
      </div>
    </div>
    <popup v-if="!issm">
      <div class="smtopimg">
        <img
          class="smimg"
          src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/crm/d4494f4f-9e98-459b-a631-9eae7ee12b4b.png"
          alt=""
        />
      </div>
      <div class="tccontentbocx">
        <div class="text">
          为满足相关法律法规政策及相关主管部门的要求，我们需要收集您的姓名、身份证件号码，以证实您的个人身份。
        </div>
        <div class="btnbox">
          <div class="btn" @click="tosm">立即去实名</div>
        </div>
      </div>
    </popup>
    <customTabBar v-if="issm" url="/pages/rankinglist/index" />
  </div>
</template>

<script lang="ts" setup>
import popup from "@/components/popup/popup.vue";
import { ref, reactive, computed, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  getqueryrankinglistallapi,
  getqueryrankinglistinsurapi,
  getqueryriserankinglistallapi,
  getquerynewpeoplerankingapi,
} from "@/api/contact";
import user from "@/utils/user";
import { getuserinfo, getSaleTaskapi } from "../../api/personalmsgapi";

import customTabBar from "@/components/tabbar/index.vue";
const router = useRouter();
const route = useRoute();
onLoad(() => {});
onMounted(async () => {
  await user.waitLogin();
  getuserinfo().then((res: any) => {
    console.log(res, "resfsiu");
    issm.value = !res.idCardNo ? false : true;
    uni.hideTabBar();
  });
});
const issm = ref(true);
const tosm = () => {
  uni.navigateTo({
    url: "/pages/realNameAuthentication/realNameAuthentication?hassm=" + "0",
  });
};
const getqueryrankinglistall = () => {
  getqueryrankinglistallapi({ month: date.value }).then((res: any) => {
    console.log(res);
    list.value = res.list;
  });
};
const list = ref<any>([]);
const getqueryrankinglistinsur = () => {
  getqueryrankinglistinsurapi({ month: date.value }).then((res: any) => {
    console.log(res);
    list.value = res.list;
  });
};
const getqueryriserankinglistall = () => {
  getqueryriserankinglistallapi({ month: date.value }).then((res: any) => {
    console.log(res);
    list.value = res.list;
  });
};
const changetab = (val: any) => {
  console.log(val);
  tabflag.value = val;
  if (val === 0) {
    getqueryrankinglistall();
  } else if (val === 1) {
    getqueryrankinglistinsur();
  } else if (val === 2) {
    getqueryriserankinglistall();
  } else {
    getquerynewpeopleranking();
  }
};
const getquerynewpeopleranking = () => {
  getquerynewpeoplerankingapi({ month: date.value }).then((res: any) => {
    console.log(res, "fhsudhuygdghuydhuygdghy");
    list.value = res.list;
  });
};
const tabflag = ref(2);
const changemonth = (val: any) => {
  startDate.value = dayjs(val.detail.value).startOf("month").format("MM/DD");
  endDate.value = dayjs(val.detail.value).endOf("month").format("MM/DD");
  console.log(startDate.value);
  console.log(endDate.value);
  date.value = val.detail.value;
  if (tabflag.value === 0) {
    getqueryrankinglistall();
  } else if (tabflag.value === 1) {
    getqueryrankinglistinsur();
  } else if (tabflag.value === 2) {
    getqueryriserankinglistall();
  } else {
    getquerynewpeopleranking();
  }
};
const date = ref("");
const startDate = ref("");
const endDate = ref("");

onShow(async () => {
  await user.waitLogin();
  tabflag.value = 2;
  startDate.value = dayjs().startOf("month").format("MM/DD");
  endDate.value = dayjs().endOf("month").format("MM/DD");
  date.value = dayjs().format("YYYY-MM");
  getqueryriserankinglistall();
  wx.showShareMenu({
    withShareTicket: true,
    /* //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击 */
    menus: ["onShareAppMessage", "onShareTimeline"],
  });
});
</script>

<style lang="scss" scoped>
.oth {
  width: 46rpx;
  height: 50rpx;
}

.tx {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.tabactive {
  background: linear-gradient(180deg, #c6846b 27%, rgba(197, 131, 108, 0) 124%);
  border-top-left-radius: 36rpx;
  border-top-right-radius: 36rpx;
}

.ranklistbox {
  z-index: 999;
  margin-top: -20rpx;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  height: calc(100vh - 460rpx);
  overflow: auto;
  position: fixed;
  top: 480rpx;
  left: 0;
  border-top-left-radius: 36rpx;
  border-top-right-radius: 36rpx;

  &.set-height {
    height: calc(100vh - 460rpx - constant(safe-area-inset-bottom) - 100rpx);
    height: calc(100vh - 460rpx - env(safe-area-inset-bottom) - 100rpx);
    overflow: auto;
  }

  .listitem {
    display: flex;
    align-items: center;
    height: 133rpx;

    .index {
      font-weight: 800;
      flex: 1;
      text-align: end;
    }

    .name {
      flex: 3;
      text-align: center;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      position: relative;
      box-sizing: border-box;

      .oth {
        position: absolute;
        top: -20rpx;
        left: 6rpx;
      }
    }

    .dept {
      flex: 3;
      text-align: center;
      font-size: 28rpx;
    }

    .price {
      flex: 3;
      text-align: center;
      font-size: 28rpx;
      font-weight: 800;
    }
  }

  .tabtop {
    display: flex;
    align-items: center;
    height: 97rpx;
    font-size: 28rpx;
    color: #565868;

    .index {
      flex: 1;
      text-align: center;
    }

    .name {
      flex: 3;
      padding-left: 50rpx;
    }

    .dept {
      flex: 3;
      text-align: center;
    }

    .price {
      flex: 3;
      text-align: center;
    }
  }
}

.tabbox {
  margin-top: 35rpx;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  height: 106rpx;
  background-color: #1a43f9;
  display: flex;
  align-items: center;
  border-top-left-radius: 36rpx;
  border-top-right-radius: 36rpx;

  .tabitem {
    width: 33%;
    flex-shrink: 0;
    height: 100%;
    text-align: center;
    padding-top: 22rpx;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 28rpx;
  }
}

.month {
  padding-left: 25rpx;
  margin-top: 15rpx;

  .content {
    width: 230rpx;
    background: rgba(65, 34, 174, 0.59);
    font-size: 28rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24rpx;
  }
}

.img {
  margin-left: 9rpx;
  width: 15rpx;
  height: 15rpx;
}

.box {
  width: 100vw;
  height: 100vh;
  background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/crm/7169a646-da0e-441f-a8e4-7cef064e89ab.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0 -160rpx;
  overflow: auto;
}

.selectmonth {
  margin-top: 250rpx;
  padding-left: 25rpx;
  font-size: 28rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.one {
  background: linear-gradient(
    180deg,
    rgba(255, 118, 66, 0) 0%,
    rgba(255, 118, 66, 0.1) 99%
  );

  .index {
    font-size: 36rpx;
    font-style: italic;
    font-style: oblique;
    color: #ffa814 !important;
  }

  .name {
    color: #202536 !important;
    font-weight: 800;
  }

  .dept {
    color: #202536 !important;
    font-weight: 600;
  }

  .price {
    color: #ff7642 !important;
    font-weight: 800;
  }
}

.two {
  background: linear-gradient(180deg, rgba(254, 241, 255, 0) 0%, #fef1ff 99%);

  .index {
    font-size: 36rpx;
    font-style: italic;
    font-style: oblique;
    color: #9497b1 !important;
  }

  .name {
    color: #202536 !important;
    font-weight: 800;
  }

  .dept {
    color: #202536 !important;
    font-weight: 600;
  }

  .price {
    color: #ff7642 !important;
    font-weight: 800;
  }
}

.three {
  background: linear-gradient(180deg, rgba(241, 248, 255, 0) 0%, #f1f8ff 100%);

  .index {
    font-size: 36rpx;
    font-style: italic;
    font-style: oblique;
    color: #ff7642 !important;
  }

  .name {
    color: #202536 !important;
    font-weight: 800;
  }

  .dept {
    color: #202536 !important;
    font-weight: 600;
  }

  .price {
    color: #ff7642 !important;
    font-weight: 800;
  }
}

.emptyimgbox {
  width: 100%;
  box-sizing: border-box;
  margin-top: 224rpx;

  .img {
    width: 100%;
    height: 260rpx;
  }
}

.tccontentbocx {
  padding: 0 36rpx;

  .text {
    color: #171a1d;
    font-size: 28rpx;
  }

  .btnbox {
    margin-top: 50rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      width: 100%;
      height: 88rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      background-color: #3e5ff5;
      border-radius: 60rpx;
    }
  }
}

.smtopimg {
  width: 100%;
  margin-bottom: 77rpx;

  .smimg {
    width: 100%;
    height: 364rpx;
    margin-left: 0;
  }
}
</style>
